import { useAppSelector } from '@shared/lib/hooks/redux'
import { CurrentDate } from '@shared/ui/CurrentDate'
import { Grid } from '@shared/ui/Grid'
import { Panel } from '@shared/ui/Panel'
import { Title } from '@shared/ui/Title'
import { DashboardContent } from '@widgets/DashboardContent'
import styles from './DashboardPage.module.scss'

const DashboardPage = () => {
  const user = useAppSelector((state) => state.user)

  return (
    <Grid columns={'70% calc(30% - 24px)'} gap={24}>
      <div className=''>
        <div className={styles.wrapper}>
          <Title className={styles.title} tag='h4'>{`С возвращением ${user.name}`}</Title>
          <div className={styles['date-wrapper']}>
            <CurrentDate />
          </div>
        </div>
        <DashboardContent />
      </div>
      <Panel className={styles.panel} withShadow withoutHover>
        Текущий проект
      </Panel>
    </Grid>
  )
}
export default DashboardPage
